
import CustomVideoPlayer from "@/components/CustomVideoPlayer";
import { RootStackParamTypeList } from "@/navigation/StackParamType";
import { NavigationProp, useNavigation } from "@react-navigation/native";
import { Text, TouchableOpacity, View, StyleSheet, TextInput, ScrollView } from "react-native"
import { useState } from "react";


const HomeScreen = () => {

    const navigation = useNavigation<NavigationProp<RootStackParamTypeList>>();
    const [customUrl, setCustomUrl] = useState('http://gslbmgsplive.miguvideo.com/wd_r2/2018/ocn/cctv14hd/2000/index.m3u8?msisdn=20251013180039442a2518de0c4ccd96cf4cccf20f1502&mdspid=&spid=699004&netType=0&sid=5500212875&pid=2028597139&timestamp=20251013180039&Channel_ID=0116_2600000900-99000-201600010010027&ProgramID=624878440&ParentNodeID=-99&assertID=5500212875&client_ip=106.13.250.90&SecurityKey=20251013180039&promotionId=&mvid=5100001697&mcid=500020&playurlVersion=WX-A1-8.9.2-RELEASE&userid=&jmhm=&videocodec=h264&bean=mgspad&tid=android&conFee=0&puData=145f1343cb282e172c1202b53c1351ef&ddCalcu=f1e4e1515f431013c4335cbb2208221ec127');

    const goToWatchTv = () => {
        navigation.navigate("VedioListScreen")
    }

    return (
        <ScrollView style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.title}>欢迎使用视频播放器</Text>
                <Text style={styles.subtitle}>支持直播和点播视频</Text>
            </View>
            
            <View style={styles.content}>
                <View style={styles.featureCard}>
                    <Text style={styles.cardTitle}>示例直播</Text>
                    <View style={styles.playerContainer}>
                        <CustomVideoPlayer isLive={true} sourceUrl={customUrl}/>
                    </View>
                    <Text style={styles.cardDescription}>
                        这是一个示例直播流，展示播放器功能
                    </Text>
                </View>
                
                <View style={styles.customUrlContainer}>
                    <Text style={styles.customUrlTitle}>自定义直播源</Text>
                    <TextInput
                        style={styles.urlInput}
                        value={customUrl}
                        onChangeText={setCustomUrl}
                        placeholder="请输入m3u8直播地址"
                        placeholderTextColor="#aaa"
                        multiline={true}
                        numberOfLines={3}
                        textAlignVertical="top"
                    />
                    <TouchableOpacity 
                        style={styles.applyButton}
                        onPress={() => {
                            // 刷新播放器组件
                            setCustomUrl(customUrl);
                        }}
                    >
                        <Text style={styles.applyButtonText}>应用</Text>
                    </TouchableOpacity>
                </View>
                
                <TouchableOpacity 
                    onPress={goToWatchTv} 
                    style={styles.watchButton}
                >
                    <Text style={styles.watchButtonText}>查看所有频道</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#121826',
    },
    header: {
        alignItems: 'center',
        paddingVertical: 30,
        backgroundColor: 'rgba(30,42,77,0.9)',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(46,134,222,0.3)',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#00EDD4',
        marginBottom: 5,
    },
    subtitle: {
        fontSize: 16,
        color: '#aaa',
    },
    content: {
        flex: 1,
        padding: 20,
    },
    featureCard: {
        backgroundColor: 'rgba(30,42,77,0.9)',
        borderRadius: 15,
        padding: 15,
        marginBottom: 20,
        borderWidth: 1,
        borderColor: 'rgba(46,134,222,0.3)',
    },
    cardTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#00EDD4',
        marginBottom: 15,
        textAlign: 'center',
    },
    playerContainer: {
        height: 200,
        marginBottom: 15,
        borderRadius: 10,
        overflow: 'hidden',
    },
    cardDescription: {
        fontSize: 14,
        color: '#aaa',
        textAlign: 'center',
    },
    customUrlContainer: {
        backgroundColor: 'rgba(30,42,77,0.9)',
        borderRadius: 15,
        padding: 15,
        marginBottom: 20,
        borderWidth: 1,
        borderColor: 'rgba(46,134,222,0.3)',
    },
    customUrlTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#00EDD4',
        marginBottom: 10,
        textAlign: 'center',
    },
    urlInput: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        borderRadius: 8,
        padding: 12,
        color: '#fff',
        marginBottom: 10,
        borderWidth: 1,
        borderColor: 'rgba(46,134,222,0.3)',
        height: 80,
        textAlignVertical: 'top',
    },
    applyButton: {
        backgroundColor: '#6A4CE6',
        paddingVertical: 10,
        borderRadius: 8,
        alignItems: 'center',
    },
    applyButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
    watchButton: {
        backgroundColor: '#6A4CE6',
        paddingVertical: 15,
        borderRadius: 10,
        alignItems: 'center',
        marginTop: 10,
    },
    watchButtonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
});

export default HomeScreen